<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="font-size: 5rem;">123123123</div>
    <script>
        /*
            总结：
                1. n个引用变量指向同一个对象， 通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据
                2. 2个引用变量指向同一个对象， 让其中一个引用变量指向另一个对象，另一个引用变量依然指向前一个对象
        */ 

        /*
            问题1：var a = xxx; a内存中到底保存的是什么？
                如果xxx是基本类型的数据，那么保存的就是这个数据本身
                如果xxx是一个对象，那么保存的就是对象在内存中的地址值
                xxx是个变量，保存的是xxx的内存内容(可能是基本数据、也可能是地址值)
        */
        var a = 3;
        var a = {};

        /*
            问题2：如果多个引用变量指向同一个对象，通过一个修改对象的内部数据，其他所有的变量能看到的是修改后的数据
        */
        var obj1 = {
            name: 'tom'
        };
        var obj2 = obj1;
        obj2.age = 123;
        console.log(obj1);

        function fn(obj) {
            obj.name = 'ws';
        }
        fn(obj1);
        console.log(obj2);

        /*
            问题3：如果多个引用变量指向同一个对象，通过一个修改对象的内部数据，其他所有的变量能看到的是修改后的数据
        */
        var a = {
            age: 12
        };
        var b = a;//把a指向的对象的的地址值赋值给了b
        a = {
            name: 'Bob',
            age: 13
        };//重新声明了一个对象，并把地址值赋值给a，这一步是影响不到b的，务必注意这一步
        b.age = 14;//从上一步开始，a和b指向的已经是不同的对象了，所以这里对b的修改改变不了a
        console.log(b.age, a.name, a.age);// 14,Bob,13

        function fn2(obj) {
            //要注意，obj是一个形参
            obj = {
                age: 15
            }
        };
        fn2(a);//你把a当做参数传给fn2后，obj指向了a所指向的对象，但是函数里紧接着声明了一个新的对象然后把地址值赋值给了obj，和上面a、b的关系一样，你赋值给obj，是影响不了a的，所以a还是指向他原来的那个地址值对应的对象
        console.log(a.age);//13
    </script>
</body>

</html>